<template>
  <div style="height: 100%; width: 100%" ref="container1">
    <div id="Acyclic" :style="{ width: width/2+'px', height: height+'px' }"></div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import * as echarts from "echarts";

export default {
  props: {
    width:{
      type: Number,
      default: 600,
    },
    height:{
      type: Number,
      default: 300,
    },
    chartData:{
      type: Object
    }
  },
  name: "Acyclic",
  data() {
    return {
      chartInstance: null,
      echart: echarts,
      option: {},
      legendFontSize: 12, // 初始图例文字大小
      resizeTimer: null // 定时器
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  methods: {
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("Acyclic"));
    },
    async getData() {
      await this.updateData();
    },
    updateData() {
      // 创建渐变色配置：已处理部分（从浅蓝到深蓝）
      const processedGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#297fcc'}, // 渐变起始颜色
        {offset: 1, color: '#04ccf8'}  // 渐变结束颜色
      ])

      // 创建渐变色配置：未处理部分（从浅红到深红）
      const unprocessedGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {offset: 0, color: '#ff7e67'}, // 渐变起始颜色
        {offset: 1, color: '#ff4c52'}  // 渐变结束颜色
      ])

      // 花纹图案
      // const pattern = new echarts.graphic.Pattern({
      //   width: 10,
      //   height: 10,
      //   repeat: 'repeat',
      //   image: 'data:image/svg+xml;base64,...' // 您可以替换为您的花纹图案的base64编码
      // });
      this.option = {
        title: {
          text: this.chartData.total.toString(),
          subtext: '月度报警',
          left: 'center',
          top: '40%',
          textStyle: {
            color: '#00f2f1',
            fontSize: 28
          },
          subtextStyle: {
            color: '#00f2f1',
            fontSize: 14
          }
        },
        legend: {
          orient: 'vertical', // 垂直方向排列
          right: '10%', // 图例距离右侧的距离

          textStyle: {
            color: [],
          },
          data: ['已处理', '未处理']
        },
        series: [
          {
            name: '处理情况',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'inside', // 将标签显示在饼图内部
              formatter: '{b}\n{c} ({d}%)', // 自定义标签格式
              color: '#fff', // 标签文字颜色
              fontSize: 14 // 标签文字大小
            },
            labelLine: {
              show: false,
              length: 10, // 第一个折线的长度
              length2: 10, // 第二个折线的长度
              lineStyle: {
                color: '#fff', // 线条颜色
                width: 2 // 线条宽度
              }
            },
            emphasis: {
              label: {
                show: true, // 悬浮时显示标签
                fontSize: '16',
                fontWeight: 'bold'
              },
              labelLine: {
                show: true, // 悬浮时显示指向线
                length: 10,
                length2: 10
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: [
              {value: this.chartData.processed, name: '已处理', itemStyle: {color: processedGradient}},
              {value: this.chartData.unprocessed, name: '未处理', itemStyle: {color: unprocessedGradient}}
            ]
          }
        ]
      };
      this.chartInstance.setOption(this.option, true);
      this.handleResizeEnd()
    },
    findTodayAllCount() {
      console.log("获取左上角报警数据")
      let level = JSON.parse(localStorage.getItem("user")).level
      let organizationId = JSON.parse(localStorage.getItem("user")).organization
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      let clientId = this.$store.state.currentClientInfo?.id??""
      request.get("/warn-record/findTodayAllCount?level="+level+"&organizationId="+organizationId+"&isAllClient="+isAllClient+"&clientIds="+clientIds+"&clientId="+clientId).then(res => {
        if (res.code === '200') {
          let data = res.data;
          this.chartData.total = data.total;
          this.chartData.processed = data.processed;
          this.chartData.unprocessed = data.unprocessed;
        } else {
          this.$message.error("错误" + res.msg)
        }
      })
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.legendFontSize = Math.max(Math.floor(this.chartInstance.getWidth() / 100), 5);
        this.updateData(); // 重新渲染 echarts 图表
      }, 1000); // 设置延迟时间，1000ms
    },
  },
};
</script>

<style scoped>

</style>

